<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑协议</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css"/>
</head>
<body>
<div style="padding: 12px 30px 0 0;">
    <form class="layui-form" lay-filter="code">
        <div class="layui-form-item">
            <label class="layui-form-label">指令集名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入指令集名称" autocomplete="off" class="layui-input"
                       lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">指令集标识</label>
            <div class="layui-input-block">
                <input type="text" name="key" placeholder="请输入指令集标识,仅支持字母及下划线" autocomplete="off" class="layui-input"
                       lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">协议类型</label>
            <div class="layui-input-block">
                <select name="key" placeholder="请选择协议类型"
                        lay-verify="required">
                    <option value="tcp">TCP</option>
                    <option value="udp">UDP</option>
                    <option value="http">HTTP</option>
                    <option value="https">HTTPS</option>
                    <option value="mqtt">MQTT</option>
                    <option value="mqtt-sn">MQTT-SN</option>
                    <option value="websocket">WEBSOCKET</option>
                    <option value="coap">CoAP</option>
                    <option value="lwm2m">LwM2M</option>
                    <option value="icmp">ICMP</option>
                    <option value="zigbee">ZIGBEE</option>
                    <option value="ttl">TTL</option>
                    <option value="rs232">RS232</option>
                    <option value="rs485">RS485</option>
                    <option value="rs422">RS422</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">指令集代码</label>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">指令名称</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="name_1" placeholder="请输入指令名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">指令码</label>
            <div class="layui-input-inline" style="width: 240px;">
                <input type="text" name="code_1" placeholder="请输入指令码（十六进制码）" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">延时</label>
            <div class="layui-input-inline" style="width: 70px;">
                <select name="delay_1" lay-verify="required">
                    <option value="0">0</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                    <option value="1500">1500</option>
                    <option value="2000">2000</option>
                    <option value="2500">2500</option>
                    <option value="3000">3000</option>
                    <option value="3500">3500</option>
                    <option value="4000">4000</option>
                    <option value="4500">4500</option>
                    <option value="5000">5000</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">ms</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">指令名称</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="name_2" placeholder="请输入指令名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">指令码</label>
            <div class="layui-input-inline" style="width: 240px;">
                <input type="text" name="code_2" placeholder="请输入指令码（十六进制码）" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">延时</label>
            <div class="layui-input-inline" style="width: 70px;">
                <select name="delay_2">
                    <option value="0">0</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                    <option value="1500">1500</option>
                    <option value="2000">2000</option>
                    <option value="2500">2500</option>
                    <option value="3000">3000</option>
                    <option value="3500">3500</option>
                    <option value="4000">4000</option>
                    <option value="4500">4500</option>
                    <option value="5000">5000</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">ms</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">指令名称</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="name_3" placeholder="请输入指令名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">指令码</label>
            <div class="layui-input-inline" style="width: 240px;">
                <input type="text" name="code_3" placeholder="请输入指令码（十六进制码）" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">延时</label>
            <div class="layui-input-inline" style="width: 70px;">
                <select name="delay_3">
                    <option value="0">0</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                    <option value="1500">1500</option>
                    <option value="2000">2000</option>
                    <option value="2500">2500</option>
                    <option value="3000">3000</option>
                    <option value="3500">3500</option>
                    <option value="4000">4000</option>
                    <option value="4500">4500</option>
                    <option value="5000">5000</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">ms</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">指令名称</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="name_4" placeholder="请输入指令名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">指令码</label>
            <div class="layui-input-inline" style="width: 240px;">
                <input type="text" name="code_4" placeholder="请输入指令码（十六进制码）" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">延时</label>
            <div class="layui-input-inline" style="width: 70px;">
                <select name="delay_4">
                    <option value="0">0</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                    <option value="1500">1500</option>
                    <option value="2000">2000</option>
                    <option value="2500">2500</option>
                    <option value="3000">3000</option>
                    <option value="3500">3500</option>
                    <option value="4000">4000</option>
                    <option value="4500">4500</option>
                    <option value="5000">5000</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">ms</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">指令名称</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="name_5" placeholder="请输入指令名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">指令码</label>
            <div class="layui-input-inline" style="width: 240px;">
                <input type="text" name="code_5" placeholder="请输入指令码（十六进制码）" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 50px;">延时</label>
            <div class="layui-input-inline" style="width: 70px;">
                <select name="delay_5">
                    <option value="0">0</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                    <option value="1500">1500</option>
                    <option value="2000">2000</option>
                    <option value="2500">2500</option>
                    <option value="3000">3000</option>
                    <option value="3500">3500</option>
                    <option value="4000">4000</option>
                    <option value="4500">4500</option>
                    <option value="5000">5000</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">ms</div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="code">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script>
    var queryObj=parseUrlParams()
   // var protocols=parent.loadCurrentProtocols()

    layui.use('form', function () {
        var form = layui.form;
        form.on('submit(code)', function (data) {
            saveProtocol(data.field);
            return false;
        });

        if(queryObj['index']!==undefined){
            var protocol=protocols[parseInt(queryObj['index'])-1]
            var mObj= {
                "name":protocol.action_name
                ,"key": protocol.action_key
            }
            for(var i=1;i<=protocol.codes.length;i++){
                mObj["name_"+i]=protocol.codes[i-1].name
                mObj["code_"+i]=protocol.codes[i-1].code
                mObj["delay_"+i]=protocol.codes[i-1].delay
            }
            form.val("code",mObj);
        }
    })

    function saveProtocol(field) {
        var item = new Object();
        var obj = {
            name: field.name,
            custom:true,
            type: "code",
            codes: []
        };
        for (var i = 1; i <= 5; i++) {
            if (field["code_" + i].length > 0) {
                obj.codes.push({
                    name: field["name_" + i],
                    code: field["code_" + i],
                    delay: parseInt(field["delay_" + i])
                })
            }
        }
        item[field.key] = obj
        sendRequest(item)
    }


    function sendRequest(item){
        $.ajax({
            url: "/admin/device/protocol/save",
            method: "POST",
            dataType: 'json',
            contentType: 'application/json',
            headers:{
                pwd:queryObj['pwd']
            },
            data: JSON.stringify(item),
            success: function (res) {
                if (res.code === 0) {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.loadProtocol(queryObj['pwd'])
                    parent.showRestartTip()
                    parent.layer.close(index); //再执行关闭
                }else{
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.prompt({
                            formType: 1,
                            value: '',
                            title: '请输入认证密码',
                            area: ['300px', '20px'] //自定义文本域宽高
                        }, function (value, index, elem) {
                            queryObj['pwd']=value
                            sendRequest(item)
                        })
                    })
                }
            }
        })
    }
</script>
</body>
</html>